<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h4,
    p {
      margin: 0;
      font-weight: normal;
    }

    a {
      text-decoration: none;
    }

    body {
      background-color: #eee;
    }

    #app {
      background-color: #fff;
      width: 900px;
      margin: 50px auto;
      text-align: center;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
      padding: 1em 2em;
    }

    .list {
      padding: 1em;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
    }

    .book {
      position: relative;
      flex-basis: 22%;
      margin-right: 2%;
      margin-bottom: 1em;
      text-align: center;
      background-color: #fff;
      padding: 1em 0;
      transition: all .2s linear;
      border: 2px solid #fff;

    }

    .book:hover {

      box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
      transform: translate3d(0, -2px, 0);

    }

    .title {
      line-height: 2em;
      margin: 0;
      padding: 0;
    }

    .figure img {
      width: 150px;
      height: 150px;
    }

    .desc {
      margin: 0;
      font-size: 16px;
    }

    .price {
      margin: 0;
      font-size: 14px;
    }

    .btn {
      cursor: pointer;
      position: absolute;
      right: 0.8em;
      top: 0.8em;
      border: none;
      color: #ff6700;
      padding: .5em .5em;
      font-size: 12px;
      user-select: none;
      outline: 0 none !important;
    }

    .btn:active {
      border: none;
    }

    .btn:hover {
      background-color: #ff6700;
      color: #fff
    }

    .selected {
      border: 2px solid #ccc;
      box-shadow: 0 15px 30px rgba(0, 0, 0, .3);
    }

    .cart {
      border: 1px solid #eee;
      background-color: #fff;
      text-align: center;
      position: fixed;
      padding: 1em;
      right: 100px;
      top: 200px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h3>我的购物车</h3>
    <div class="list">
      <!-- v-for="(循环变量，索引变量 in 数组)" -->
      <div v-for="(item,idx) in bookList" :class="{selected: item.isCheck}" class="book" :title="item.name"
        @click="item.isCheck=!item.isCheck">
        <a href="" @click.prevent>
          <div class="figure">
            <img :src="item.picSrc" :alt="item.name">
          </div>
          <!-- 动态绑定属性值 -->
          <h4 class="title" v-bind:title="item.name">{{item.name}}</h4>
          <p class="desc"></p>
          <p class="price"><span class="num">{{item.price}}</span></p>
        </a>
        <button class='btn' title="移出购物车" @click="hDel(idx)">X</button>
      </div>

      <!-- <div class="book" title="JavaScript高级程序设计">
                <a href="">
                    <div class="figure">
                        <img src="http://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpg"
                            alt=" JavaScript高级程序设计">
                    </div>
                    <h4 class="title" title="JavaScript高级程序设计">JavaScript高级程序设计</h4>
                    <p class="desc"></p>
                    <p class="price"><span class="num">78</span></p>
                </a>
                <button class='btn' title="移出购物车">-</button>
            </div>
            <div class="book" title="断舍离">
                <a href="">
                    <div class="figure">
                        <img alt="断舍离" src="http://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpg"
                            title="断舍离">
                    </div>
                    <h4 class="title" title="断舍离">断舍离</h4>
                    <p class="desc"></p>
                    <p class="price"><span class="num">29.9</span></p>
                </a>
                <button class='btn' title="移出购物车">-</button>
            </div>
            <div class="book" title="王子与贫儿">
                <a href="">
                    <div class="figure">
                        <img src="http://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpg"
                            alt="王子与贫儿">
                    </div>
                    <h4 class="title" title="王子与贫儿">王子与贫儿</h4>
                    <p class="desc"></p>
                    <p class="price"><span class="num">39.9</span></p>
                </a>
                <button class='btn' title="移出购物车">-</button>
            </div>
            <div class="book" title="高效能人士的七个习惯">
                <a href="">
                    <div class="figure">
                        <img src="http://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpg"
                            alt="高效能人士的七个习惯">
                    </div>
                    <h4 class="title" title="高效能人士的七个习惯">高效能人士的七个习惯</h4>
                    <p class="desc"></p>
                    <p class="price"><span class="num">59.3</span></p>
                </a>
                <button class='btn' title="移出购物车">-</button>
            </div> -->
    </div>
    <div v-if="bookList.length == 0">
      购物车是空的！
    </div>
  </div>
  <!-- 1. 引入vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    //  目标
    // 1. 完成数据的渲染 v-for
    // 2. 删除数据

    // 步骤
    // 1. 引入vue.js
    // 2. 实例化
    //   el,data,methods
    // 3. 修改视图
    //   (1) 渲染数据
    //       v-for , v-bind
    //   (2) 点击 - ，删除元素
    // 思路 ：
    // 1. 给 - 添加点击事件
    // 2. 在事件的回调中删除bookList中的数据项

    //  （3) v-if 补充当没有数据时的情况
    const vm = new Vue({
      el: '#app',
      data: {
        bookList: [
          {
            isCheck: true,
            name: '当你学会独处',
            price: 29.9,
            picSrc: 'http://img3m8.ddimg.cn/70/15/28522168-1_l_3.jpg'
          },
          {
            isCheck: false,

            name: 'JavaScript高级程序设计',
            price: 78,
            picSrc: 'http://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpg'
          },
          {
            isCheck: false,

            name: '断舍离',
            price: 29.9,
            picSrc: 'http://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpg'
          },
          {
            isCheck: false,

            name: '王子与贫儿',
            price: 39.9,
            picSrc: 'http://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpg'
          },
          {
            isCheck: false,

            name: '高效能人士的七个习惯',
            price: 59.3,
            picSrc: 'http://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpg'
          }
        ]
      },
      methods: {
        hDel(index) {
          console.log('删除', index)
          // 删除 bookList中的下标为index的那一项

          // 如何去删除数组第i项？
          // arr.splice(元素的起点,要删除几项)
          this.bookList.splice(index, 1)

        }
      }
    })

  </script>
</body>

</html>